<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>个人网页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <style>
    .transition-3d-hover {
      transition: all .2s ease-in-out;
    }
    .transition-3d-hover:hover,.transition-3d-hover:focus {
      -webkit-transform: translateY(-3px);
      transform: translateY(-3px);
    }
    body {
      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    }
    .navbar {
      background-color: #343a40;
    }
    .navbar-brand, .nav-link {
      color: white !important;
    }
    .navbar {
      background-color: #343a40;
    }
    .navbar-brand {
      color: black !important; /* 改为黑色，使用!important确保样式生效 */
    }
    .navbar-brand:hover {
      color: #555 !important; /* 可选：鼠标悬停时的颜色 */
    }
    .navbar-brand, .nav-link {
      color: black !important; /* 修改链接为黑色 */
    }
    .hero-section {
      background-size: cover;
      padding: 100px 0;
      color: white;
      text-align: center;
    }
    .hero-section h1 {
      font-size: 50px;
      font-weight: 700;
    }
    .hero-section .lead {
      font-size: 22px;
    }
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .card-body {
      padding: 2rem;
    }
  </style>
</head>
<body>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/1.png" alt="头像" class="rounded-circle me-2 img-fluid" style="max-width: 50px; height: auto; object-fit: cover;">
      个人网页
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex align-items-center">
        <li class="nav-item">
          <a class="nav-link d-flex align-items-center" href="/resume.html">
            简历
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-flex align-items-center" href="/chat-demo.html">
            AI聊天
          </a>
        </li>
        <li class="nav-item">
          <a class="btn btn-sm btn-primary transition-3d-hover" href="/repositories.html">代码仓库</a>
        </li>
        <li class="nav-item">
          <a class="nav-link d-flex align-items-center" href="/resume-generation.html">
            简历生成器
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- Hero Section -->
<div class="hero-section">
  <h1 class="animate__animated animate__fadeIn animate__delay-1s">欢迎来到我的个人网页</h1>
  <p class="lead animate__animated animate__fadeIn animate__delay-2s">探索我的简历、项目和AI聊天功能。</p>
</div>

<!-- About Section -->
<div class="container mt-5" data-aos="fade-up">
  <h2 class="text-center">关于我</h2>
  <p class="text-center">一个热衷于数据科学、编程和AI技术的本科生。在多个项目中应用了不同的技术，致力于创造更高效、更智能的解决方案。</p>
</div>

<!-- Skills Section -->
<div class="container mt-5" data-aos="fade-left">
  <h2 class="text-center">我的技能</h2>
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Java</h5>
          <p class="card-text">扎实的Java编程基础，深入学习了JDK源码与JVM工作原理。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">前端开发</h5>
          <p class="card-text">熟悉HTML、CSS、JavaScript和Vue.js，能够构建交互性强的Web应用。</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">数据库管理</h5>
          <p class="card-text">熟悉MySQL与NoSQL数据库（如Redis），了解数据库的设计与优化。</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Footer Section -->
<div class="container mt-5 text-center">
  <p>&copy; 2024 李代鸣 | 个人网页 | 联系方式：2365765614@qq.com</p>
</div>

<!-- Scripts -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
  const options = {
    stringsElement: '#typed-strings',
    startDelay: 300,
    typeSpeed: 150
  };
  if (document.getElementById("typed-strings")) {
    new Typed("#typed", options);
  }

  AOS.init();
</script>

</body>
</html>
